<?php         
$db = new Database;
$auth = Auth::getAuth('current_user');
$user_id = $auth['id'];
$company_id = $auth['company_id'];
?>
    <div class="drag" style="position: fixed;left: 0;bottom: 0;top:0;z-index:1000;margin-top:2px;margin: 32px 0px 0px 0px;border-right: 1px solid #ddd; width: 30px; min-height: 100%;background-color: #fff;">
        <?php
        $userAvatarMessage = $db->query("SELECT * FROM tbuser WHERE online='1' and id!='$user_id' and company_id ='$company_id'","array");
        foreach($userAvatarMessage as $imageData){
            $name = $imageData['firstname'].'-'.$imageData['lastname'];
            echo "<a href=\"javascript:void(0)\" onclick=\"javascript:chatWith('".$imageData['firstname']."')\">";
            //echo "<a class='openChat'>";
        echo myAvatar($imageData['extension'],$imageData['id'],"30","30","border:1px solid #ddd;");
            echo "</a>";
            //echo '</a>';
        }
        ?>
    </div>
    <?php if($auth['steps']=="0"){?>
    <!-- Help File For the steps -->
    <div class="checklistStep" style="z-index: 10000;position: fixed;right: 0;bottom: 0;top:0;margin: 32px 0px 0px 0px;border-left: 1px solid #ddd; width: 190px; min-height: 100%;overflow: auto;background-color: #fff;">
        <span class="fontGray">Procedures for Step 1</span>
        <div class="hr"></div>
        <a rel="modalBg" name="test" href="#modalBox" class="helpFileForSteps" data-steps="step1" data-action="helpStep1">
            <span class="fontGray">&nbsp;View Help?</span>
        </a>
                <ul style="font-size: 11px;">
                        <li class="step1-1 step1" style="padding: 5px;border-bottom: 1px solid #ddd;">
                            1.1 - 
                            Click the <button class="button-icon" disabled="disabled"><li class="icon-plus"></li></button> 2x at the right side of the workspace bar to add a node for your organizational chart.
                        </li>
                    <li class="step1-2 step1" style="padding: 5px;border-bottom: 1px solid #ddd;">
                        1.2 - Drag the node where ever you want to place it.
                    </li>
                    <li class="step1-3 step1" style="padding: 5px;border-bottom: 1px solid #ddd;">
                        1.3 - After you clicked the button, the node will showed on the screen then double click the node and enter your prefered text/name.
                    </li>
                    <li class="step1-4 step1" style="padding: 5px;border-bottom: 1px solid #ddd;">
                        1.4 - Once you place your node to the specific place that you want, just drag this <button class="button-icon" disabled="disabled" style="padding:5px;"><div style="width: 5px;height: 5px;padding-left: 5px;border: 3px double #3870A8;border-radius: 5px;
                        background-color: white;"></div></button> and drop it to another node to create a connection.
                    </li>
                    <li class="step1-5 step1" style="padding: 5px;border-bottom: 1px solid #ddd;">
                        1.5 - Optional, if you want to delete the line/node just click it when it highlighted then press the
                        <button class="button-icon" disabled="disabled"><li class="icon-trash"></li></button>
                        button to delete that.
                    </li>
                    <li class="step1-6 step1" style="padding: 5px;border-bottom: 1px solid #ddd;">
                        1.6 -  Optional, if you want to make a new workspace, just click the
                        <button class="button-icon" disabled="disabled"><li class="icon-file"></li></button>
                        button to remove previous created node from the screen.
                    </li>
                    <li class="step1-7 step1" style="padding: 5px;border-bottom: 1px solid #ddd;">
                        1.7-  Last if you've done setting up your organizational chart , you need to click the
                        <button class="button-icon" disabled="disabled"><li class="icon-ok"></li></button>
                        button to save it.
                    </li>
                </ul>
    </div>
    <?php
    }
    // Redirect to the next step if it is done
    $fStep = $db->query("SELECT * FROM tborgchart WHERE company_id='$company_id'","numrows");
    if($fStep!=0&&$auth['steps']=="0"){
        echo '<meta http-equiv="refresh" content="0;url=/formalistic/administer">';
    }
    ?>
    <div class="body_contents">
        <?php if($auth['steps']=="0"){?>
        <div style="text-align: center;">
            <a href="/formalistic/org_chart"><img src="/images/steps/step1A.png" style="cursor:pointer;"/></a>
            <a href="/formalistic/administer"><img src="/images/steps/step2.png" style="margin-left: -30px; cursor:pointer;"/></a>
            <a href="/formalistic/user_management"><img src="/images/steps/step3.png" style="margin-left: -30px; cursor:pointer;"/></a>
            <a href="/formalistic/administer?step=4"><img src="/images/steps/step4.png" style="margin-left: -30px; cursor:pointer;"/></a>
            <a href="/formalistic/forms"><img src="/images/steps/step5.png" style="margin-left: -30px; cursor:pointer;"/></a>
        </div>
        <?php } ?>
            <!-- Request to Approve -->
            <div class="titleBar">
                <div class="left">
                   <div class="titlePosition">
                        <div style="float: right;margin-top: -3px;"><img src="/images/icon/plus.png" class="pull-left plusBox cursor" id="accordion2" accordion-type="1" data-dropping="accordion2" data-location-default="PendingRequest" data-location = "tblPendingAction" data-table = "pending_action_tbl" class="input-small pull-right searchRA" id="search_RequestToApprove" data-search-action="search_request"></div>
                        <div style="float: left;margin-top: 2px;">Revision List</div>
                   </div>
                </div>
                <div class="right align_right">
                </div>
            </div>
            <div class="Holdercontent accordion2 display">
                <div class="plusBox activeSearch " data-location-default="RevisionList" data-location = "tblRevisionList" data-table = "revisiontList_tbl" id="search_RequestToApprove" data-search-action="search_request"></div> 
                <div class="top">
                    <div id="revisiontList_tbl"></div>
                </div>
                <div class="down">
                   
                </div>
            </div>
            <!-- Pending Actions -->
            <div class="titleBar">
                <div class="left">
                   <div class="titlePosition">
                        <div style="float: left;margin-top: 2px;">Workspace</div>
                        <div style="float: right;margin-top: -3px;">
                            <button class="button-icon actionBtn" id="terminator-symbol" rel="newDiagram" height="15" width="20" title="New Diagram"><li class="icon-file"></li></button>
                            <button class="button-icon actionBtn shapes" id="terminator-symbol" rel="1" height="15" width="20" title="Add node"><li class="icon-plus"></li></button>
                            <button class="button-icon actionBtn" id="delete" rel="delete" height="15" width="20" title="Delete node"><li class="icon-trash"></li></button>
                            <a href="#modalBox" rel="modalBg">
                                <button class="button-icon actionBtn" id="saveDiagram" rel="save" height="20" width="25" title="Save Diagram"><li class="icon-ok"></li></button>
                            </a>
                            <button class="button-icon actionBtn" id="printDiagram" rel="print" height="20" width="25" title="Print Diagram"><li class="icon-print"></li></button>
                            <button class="button-icon actionBtn" id="zoomInDiagram" rel="zIn" height="15" width="20" title="Zoom In"><li class="icon-zoom-in"></li></button>
                            <button class="button-icon actionBtn" id="zoomOutDiagram" rel="zOut" height="15" width="20" title="Zoom Out"><li class="icon-zoom-out"></li></button>
                            <button class="button-icon actionBtn" id="cancelDiagram" rel="cancel" height="15" width="20" title="Cancel Revision"><li class="icon-remove"></li></button>
                            
                        </div>
                   </div>
                </div>
                <div class="right align_right">
                </div>
             </div>
            <div class="Holdercontent">
                <div class="top">
                    <div id="modalBox" style="display: none; position: fixed; opacity: 1; z-index: 11000; left: 50%; margin-left: -330px; top: 100px;">
                        
                        
                    </div>
                    
                    <div id="modalBg" style="display: none; opacity: 0.5;"></div>
                    <div class="main_container">
                        <?php
                            //$userRole = $dataUserList['role'];
                            $activate = $db->query("SELECT * from tborgchart where status = '1' and company_id = '$company_id'","row");
                            $diagram_id = $activate['id'];
                            $selectRole = $db->query("SELECT role from tborgchartobjects where orgChart_id = '$diagram_id'","array");
                            $selectTableRole = $db->query("SELECT * from tbrole where company_id = '$company_id'","array");
                            ?>
                            <!--Group: <select class="input-small userRoleEditOrgChart">
                            <option value="0">--Select--</option>
                                <?php
                                foreach($selectTableRole as $dataTableRole){
                                    ?>
                                    <option value="<?php echo $dataTableRole['role']; ?>"><?php echo $dataTableRole['role']; ?></option>
                                    <?php
                                }
                                ?>
                            </select-->
                        <span class="actionHolder">
                            <!--img src="/images/flowchart/new_diagram.png" id="terminator-symbol" rel="newDiagram" height="15" width="20" title="New Diagram" class="actionBtn">
                            <img src="/images/flowchart/add_node.png" id="terminator-symbol" rel="1" height="15" width="20" title="Add node" class="shapes actionBtn">
                            <img src="/images/flowchart/del_node.png" id="delete" rel="delete" height="15" width="20" title="Delete node" class="actionBtn">
                            <a href="#modalBox" rel="modalBg"><img src="/images/flowchart/save_diagram.png" id="saveDiagram" rel="save" height="20" width="25" title="Save Diagram" class="actionBtn"></a>
                            <img src="/images/flowchart/print_diagram.png" id="printDiagram" rel="print" height="20" width="25" title="Print Diagram" class="actionBtn">
                            <img src="/images/flowchart/zoom_in_diagram.png" id="zoomInDiagram" rel="zIn" height="15" width="20" title="Zoom In" class="actionBtn">
                            <img src="/images/flowchart/zoom_out_diagram.png" id="zoomOutDiagram" rel="zOut" height="15" width="20" title="Zoom Out" class="actionBtn">
                            <img src="/images/flowchart/delete_node.png" id="cancelDiagram" rel="cancel" height="15" width="20" title="Cancel Revision" class="actionBtn"-->
                        </span>
                        <div class="flow_content flow_contents">
                        </div>
                    </div>
                </div>
                <div class="down">
                   
                </div>
            </div>
    </div>
    <script>
        setActivNav("administer");
    </script>